<template>
    <div id="myWelfareFormat">
        <img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)">
        <div class="head">超级福利</div>
        <div class="content">
            <div class="title">
                <img src="../../../assets/test.jpg" alt="">
                <section class="service">
                    <p>{{userFormat.welfareExchangeModel.welfareName}}</p>
                    <p>{{userFormat.welfareExchangeModel.welfareDetailed}}</p>
                    <div>{{userFormat.welfareExchangeModel.price}}积分<p>{{userFormat.welfareExchangeModel.specName}}</p></div>
                </section>
            </div>
            <!--<div class="address">
                  <p>收货地址</p>
                  <section class="shippingAddress">
                      <div>
                          <p>{{myUserData.schoolName}}<p>
                          </p>{{myUserData.buildingNo+'#'+myUserData.dormNo}}</p>
                          <img @click="alterAddress()" src="../../assets/task/next.png" alt="">
                      </div>
                      <div>
                            <p>{{myUserData.realName}}</p>
                            <p>{{myUserData.phoneNumber}}</p>
                      </div>
                  </section>
            </div>-->
            <p class="serialNumber">编号：<span>{{userFormat.welfareExchangeModel.id}}</span></p>
        </div>
        <div  @click="payOff()" v-if="userFormat.status== '1'">
            <P class="unredeem">确定使用</P>
        </div>
        <div v-else-if="userFormat.status=='2'">
            <div v-if="userFormat.welfareExchangeModel.type=='1'||userFormat.welfareExchangeModel.type=='2'">
                  <P class="unredeem" @click="goToEvalute">去评价</P>  
            </div>
            <div v-else-if="userFormat.welfareExchangeModel.type=='3'">
                  <p class="redeem">已使用</p>  
            </div>
        </div>
       
        <!--支付-->
        <div id="payWindow" style="display: none;">  
        </div>
        <div id="payLayer" style="display: none;">  
           <p>请输入四位交易密码<img @click="closePay()" src="../../../assets/task/chanelB.png" alt=""></p> 
            <section>
                <input  type="text">
                <input  type="text">
                <input  type="text">
                <input  type="text">
            </section> 
            <!--<router-link to="/cueMsg" style="text-decoration:none;"></router-link>-->
            <p class="sureNx" @click="formatSave">确定</p>
        </div> 
    </div>
</template>
<script>
export default {
  data () {
    return {
        alterSch:false,
        radio: '1',
        userFormat:{
            welfareExchangeModel:{
                id:undefined,
                welfareName:undefined,
                welfareDetailed:undefined,
                price:undefined,
                specName:undefined,
            }
        },
    }
  },
  mounted(){
      
      
  },
  created(){
        this.getParams();
  },
  methods:{
    //   评价函数
    goToEvalute(){
        this.$router.push('/Evaluation/f'+this.$route.params.id)
    },
        alterAddress(){  
            document.getElementById('alterWindow').style.display = 'block';  
            document.getElementById('showLayer').style.display = 'block';        
        },
        payOff(){
            document.getElementById('payWindow').style.display = 'block';  
            document.getElementById('payLayer').style.display = 'block';
        },
        closeDiv() {  
            document.getElementById('alterWindow').style.display = 'none';  
            document.getElementById('showLayer').style.display = 'none';  
        },
        closePay() {  
            document.getElementById('payWindow').style.display = 'none';  
            document.getElementById('payLayer').style.display = 'none';  
        },
        dropMenu(){
            this.alterSch=!this.alterSch;
        },
        // 获取当前用户信息-需要使用默认地址
        // getCurrentUser(){
        //    this.$api.currUser().then((res)=>{
        //       if(res.code == '000000'){
        //           this.myUserData = res.data;
        //       }
        //   })
        // },
        //获取福利信息
        getParams() {
            this.$api.myWelfareFind(Number(this.$route.params.id)).then((res)=>{
                if(res.code=='000000'){
                    this.userFormat = res.data;
                    console.log('IIIIIIIIIIIIIIIIIIIi')
                    console.log(this.userFormat)
                }
            })
        },
        formatSave(){
            this.$api.userWelfare(Number(this.$route.params.id)).then((res)=>{
                if(res.code=='000000'){
                    this.$router.push('/cueMsg')
                }
            })
        },

  }
}
</script>
<style>
#myWelfareFormat{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/me/bg.png)
}
#myWelfareFormat .back{
    height:1rem;
    width:0.6rem;
    margin:1rem 1rem 5rem 1rem;
}
#myWelfareFormat .head{
    color:#8a8a8a;
    font-size:1rem;
    text-align:center;
    height:3.5rem;
    line-height:3.5rem;
    background-size:100% 100%;
    background-image:url(../../../assets/welfare/title.png);
}
#myWelfareFormat .content{
    color:#8a8a8a;
    padding:1.5rem 4rem;
    background-size:100% 100%;
    background-image:url(../../../assets/welfare/connn.png);
}
#myWelfareFormat .content .title{
    display:flex;
}
#myWelfareFormat .content .title > img{
    width:5rem;
    height:5rem;
}
#myWelfareFormat .content .service{
    width:12.5rem;
    background:#FFF;
    display:flex;
    flex-direction:column;
    margin-left:1rem;
}
#myWelfareFormat .content .service > p:nth-child(1){
    flex:1;
    font-size:1rem;
    color:#000000;
}
#myWelfareFormat .content .service > p:nth-child(2){
    font-size:0.8rem;
    margin-bottom:0.5rem;
}
#myWelfareFormat .content .service div{
    font-size:1rem;
    display:flex;
    letter-spacing:0.1rem;
    justify-content:space-between;
    color:#000000;
}
#myWelfareFormat .content .address{
    margin-top:3rem;
    border-bottom:1px solid #e2e2e2;
    border-top:1px solid #e2e2e2;
    padding:0.3rem 0px;
}
#myWelfareFormat .content .address > p:before{
    content:url(../../../assets/task/map.png);
    position:relative;
    top:0.3rem;
    right:0.5rem;
}
#myWelfareFormat .content .address > p{
    font-size:0.9rem;
    color:#000000;
    margin-left:0.8rem;
}
#myWelfareFormat .content .address .shippingAddress{
    height:3rem;
    line-height:1.5rem;
    width:90%;
    margin-left:0.75rem;
    margin-top:0.5rem;
}
#myWelfareFormat .content .address .shippingAddress > div:nth-child(1){
    width:100%;
    display:flex;
    justify-content:space-between;
    font-size:0.8rem;
}
#myWelfareFormat .content .address .shippingAddress > div:nth-child(1) > p{
    width:60%;
}
#myWelfareFormat .content .address .shippingAddress > div:nth-child(1) > p > span{
    margin-left:1rem;
}
#myWelfareFormat .content .address .shippingAddress > div:nth-child(1) > img{
    height:0.8rem;
    margin-top:0.4rem;
}
#myWelfareFormat .content .address .shippingAddress > div:nth-child(2){
    width:60%;
    display:flex;
    justify-content:space-between;
    font-size:0.8rem;
}
#myWelfareFormat .content .address > img{
    width:1rem;
    height:1.3rem;
}
#myWelfareFormat .content  .serialNumber{
    margin-top:1.5rem;
    font-size:1rem;
    height:2rem;
    line-height:2rem;
    width:50%;
    color:#000; 
    letter-spacing:0.15rem
}
#myWelfareFormat .unredeem{
    background:#29a193;
    border-radius:8px;
    width:35%;
    height:2.2rem;
    line-height:2.2rem;
    margin:2rem auto;
    color:#ffffff;
    text-align:center;
}
#myWelfareFormat .redeem{
    background:#8c8c8c;
    border-radius:8px;
    width:35%;
    height:2.2rem;
    line-height:2.2rem;
    margin:2rem auto;
    color:#ffffff;
    text-align:center;
}
#myWelfareFormat #payWindow{  
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1;  
    position: absolute;       
}  
#myWelfareFormat  #payLayer {   
    width: 84%;
    height: 40%;
    background:#ffffff;  
    left: 8%;  
    top: 30%;
    color:#000;  
    z-index: 2;  
    color:#8a8a8a;
    border-radius:13px;
    position: absolute;  
}
#myWelfareFormat  #payLayer > p:nth-child(1){
    width:80%;
    height:3rem;
    margin:auto;
    line-height:3.8rem;
    font-size:1rem;
    text-align:center;
    font-weight:bold;
}
#myWelfareFormat  #payLayer > p:nth-child(1) > img{
    width:1rem;
    height:10x;
    float:right;
    margin-top:1.25rem;
}
#myWelfareFormat  #payLayer section{
    width:80%;
    margin:3rem auto;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
}
#myWelfareFormat  #payLayer section > input{
    height:3.5rem;
    width:3.5rem;
    text-align:center;
    border:1px solid #8a8a8a;
}
#myWelfareFormat  #payLayer .sureNx{
    width:50%;
    background:#29a193;
    margin:auto;
    text-align:center;
    height:3rem;
    line-height:3rem;
    color:#fff;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
    border-radius:8px;
}
</style>